<template>
	<view>
		<view>
			<uni-card :is-shadow="false" is-full>
				<view style="display: flex; align-items: center; justify-content: space-between">
					<text class="uni-h6">公告列表实例</text>
					<button class="button" type="primary" @click="addNotice" size="mini">新增</button>
				</view>
			</uni-card>
			<uni-section title="基础用法" type="line">
				<uni-list>
					<uni-list-item v-for="(item, index) in noticeList">
						<template v-slot:body>
							<view style="display: flex; align-items: center; justify-content: space-between; width: 100%">
								<view style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1">
									{{ item.noticeTitle }}
								</view>
								<view style="width: 40%; font-size: 14px; color: #a39d9d">{{ item.createTime }}</view>
								<uni-icons type="compose" size="30" @click="updateNotice(item)"></uni-icons>
								<uni-icons type="trash-filled" size="30" @click="delNotice(item)"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<uni-load-more :status="pageStatus" @clickLoadMore="clickLoadMore" :content-text="contentText" />
			</uni-section>
		</view>
		<!-- 新增/编辑弹窗 -->
		<view>
			<uni-popup ref="alertDialog" :rules="rules" type="dialog">
				<uni-popup-dialog type="primary" cancelText="关闭" confirmText="提交" @confirm="addOrEditConfirm" @close="addClose" :title="noticeDialogTitle">
					<template v-slot="">
						<uni-forms ref="baseForm" :modelValue="noticeFormData">
							<uni-forms-item label="标题" required>
								<uni-easyinput v-model="noticeFormData.noticeTitle" placeholder="请输入标题" />
							</uni-forms-item>
							<uni-forms-item label="类型">
								<select v-model="noticeFormData.noticeType">
									<option value="1">公告</option>
									<option value="2">通知</option>
								</select>
							</uni-forms-item>
							<uni-forms-item label="状态">
								<uni-data-checkbox v-model="noticeFormData.status" :localdata="statuslist" />
							</uni-forms-item>
							<uni-forms-item label="内容">
								<uni-easyinput type="textarea" v-model="noticeFormData.noticeContent" placeholder="请输入内容" />
							</uni-forms-item>
						</uni-forms>
					</template>
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="deleteAlertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提醒" :content="deleteContent" @confirm="delConfirm" @close="delClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statuslist: [
				{
					text: '正常',
					value: '0'
				},
				{
					text: '关闭',
					value: '1'
				}
			],
			noticeFormData: {
				noticeTitle: '',
				noticeType: '1',
				status: '0',
				noticeContent: '',
				noticeId: ''
			},
			rules: {
				name: {
					noticeTitle: [
						{
							required: true,
							errorMessage: '标题不能为空'
						}
					]
				}
			},
			deleteContent: '',
			delItem: null,
			noticeDialogTitle: '添加公告',
			//addOrEdit:true,
			pageStatus: 'more',
			contentText: {
				contentdown: '点击查看更多',
				contentrefresh: '加载中...',
				contentnomore: '没有更多数据'
			},
			pageNum: 1
		};
	},
	onLoad() {
		this.getList();
	},

	methods: {
		//列表
		getList() {
			this.$api({
				url: 'system/notice/list',
				method: 'get',
				params: {
					pageNum: this.pageNum,
					pageSize: 10
				}
			}).then((res) => {
				if (res.rows.length < 10) {
					this.pageStatus = 'noMore';
				}
				this.noticeList = [...this.noticeList, ...res.rows];
			});
		},
		//分页加载
		clickLoadMore(e) {
			if (this.pageStatus !== 'noMore') {
				this.pageNum++;
				this.getList();
			}
		},

		//添加
		addNotice() {
			this.noticeFormData = {
				noticeTitle: '',
				noticeType: '1',
				status: '0',
				noticeContent: '',
				noticeId: ''
			};
			this.noticeDialogTitle = '添加公告';
			this.$refs.alertDialog.open();
		},
		addOrEditConfirm() {
			let method = 'post';
			let tips = '添加成功';
			this.$refs.baseForm
				.validate()
				.then((res) => {
					if (this.noticeFormData.noticeId) {
						//编辑
						method = 'put';
						tips = '编辑成功';
					}
					this.$api({
						url: 'system/notice',
						method: method,
						data: this.noticeFormData
					})
						.then((res) => {
							this.$refs.alertDialog.close();
							this.getList();
							uni.showToast({
								title: tips
							});
						})
						.catch((e) => {
							console.log('e', e);
						});
				})
				.catch((err) => {
					console.log('err', err);
				});
		},
		//编辑
		updateNotice(item) {
			this.noticeDialogTitle = '编辑公告';
			this.noticeFormData = {
				noticeTitle: item.noticeTitle,
				noticeType: item.noticeType,
				status: item.status,
				noticeContent: item.noticeContent,
				noticeId: item.noticeId
			};
			this.$refs.alertDialog.open();
		},

		//删除
		delNotice(item) {
			this.$refs.deleteAlertDialog.open();
			this.delItem = item;
			this.deleteContent = '是否删除' + item.noticeTitle;
		},

		delConfirm() {
			this.$api({
				url: 'system/notice/' + this.delItem.noticeId,
				method: 'delete'
			})
				.then((res) => {
					this.getList();
					uni.showToast({
						title: `删除成功`
					});
				})
				.catch((e) => {
					console.log('e', e);
				});
		},

		delClose() {
			this.$refs.deleteAlertDialog.close();
		},
		addClose() {
			this.$refs.alertDialog.close();
		}
	}
};
</script>

<style></style>
